<script setup lang="ts">
import { ref, onMounted } from "vue"; //引入vue相关函数
import { getGoodsList } from "@/api"; //引入axios接口

//定义轮播图数据对象
const carouselList = ref();

//获得所有轮播图
async function getMenuList() {
  const res = await getGoodsList();
  carouselList.value = res.data.data.filter(
    (value: any) => value.category_id == 38
  );
}

//页面组件加载完成
onMounted(() => {
  getMenuList();
});
</script>

<template>
  <section>
    <el-carousel motion-blur height="350px">
      <el-carousel-item v-for="item in carouselList"
        ><img :src="item.picture"
      /></el-carousel-item>
    </el-carousel>
  </section>
</template>

<style scoped>
section,
section img {
  width: 1000px;
  height: 350px;
}
</style>
